<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <!-- 1 -->
    <div class="one">
        <img src="./image/组 34.png" alt="">
        <p>爱丽丝</p>
    </div>
    <!-- 2 -->
    <div class="two dispfx flx-spb flx-vc">
        <p class="two-p dispfx flx-vc"><img src="./image/矢量智能对象6.png" alt=""
                style="width: 0.49rem; height: 0.53rem;margin-right: 0.33rem;">全部订单</p>
        <p><img src="./image/Path.png" alt="" style="width: 0.21rem;height: 0.33rem;"></p>
    </div>
    <!-- 3 -->
    <div class="three">
        <ul class="three-ul dispfx flx-spb flx-vc">
            <li>
                <span>1</span>
                <img src="./image/矢量智能对象5.png" alt="" style="width: 0.49rem;height: 0.51rem;">
                <p>待付款</p>
            </li>
            <li>
                <span>2</span>
                <img src="./image/矢量智能对象4.png" alt="" style="width: 0.53rem;height: 0.51rem;">
                <p>待发货</p>
            </li>
            <li>
                <span>3</span>
                <img src="./image/矢量智能对象.png" alt="" style="width: 0.52rem; height: 0.53rem;">
                <p>待评价</p>
            </li>
        </ul>
    </div>
    <!-- 4 -->
    <div class="four">
        <ul class="four-ul">
            <li>
                <p><img src="./image/矢量智能对2象.png" alt=""
                        style="width: 0.52rem; height: 0.52rem;margin-right: 0.33rem">我的消息</p>
                <p><img src="./image/Path.png" alt=""></p>
            </li>
            <li>
                <p><img src="./image/矢量智能对22象.png" alt="" style="width: 0.56rem; height: 0.53rem;margin-right: 0.33rem">我的收藏</p>
                <p><img src="./image/Path.png" alt=""></p>
            </li>
            <li>
                <p><img src="./image/矢量智能对象2.png" alt="" style="width: 0.47rem; height: 0.56rem;margin-right: 0.33rem">我的地址</p>
                <p>广州市天河区车陂黄洲工业园<img src="./image/Path.png" alt="" style="margin-left: 0.25rem;"></p>
            </li>
            <li>
                <p><img src="./image/矢量智能对象3.png" alt="" style="width: 0.53rem; height: 0.41rem;margin-right: 0.33rem">我的优惠</p>
                <p>微信支付<img src="./image/Path.png" alt=""  style="margin-left: 0.25rem;"></p>
            </li>
        </ul>
    </div>
    <!-- 5 -->
    <div class="five dispfx flx-spb flx-vc">
        <p class="five-p dispfx flx-vc"><img src="./image/矢量智能对象6.png" alt=""
                style="width: 0.49rem; height: 0.53rem;margin-right: 0.33rem;">门店扫码</p>
        <p>门店扫码<img src="./image/Path.png" alt="" style="width: 0.21rem;height: 0.33rem;margin-left: 0.25rem;"></p>
    </div>
    <!-- 底部 -->
    <div class="dibu">
        <ul class="dibu-ul dispfx flx-vc flxar" id="dibu-ul">
            <li class="home">
                <img src="./image/首页.svg" type="" style="width: 0.61rem; height: 0.61rem;">
                <p>首页</p>
            </li>
            <li class="shopping">
                <img src="./image/购物车.svg" type="" style="width: 0.6rem; height: 0.56rem;">
                <p>购物车</p>
            </li>
            <li class="my">
                <img src="./image/我的-选中.svg" type="" style="width: 0.59rem; height: 0.59rem;">
                <p>我的</p>
            </li>
        </ul>
    </div>
</body>
<!-- 底部交互 -->
<script>
    $('.dibu').click(function (e) {
        var newthis = e.target.parentNode.className
        if (newthis == 'dibu') {
            return
        }
        $('.my img').attr('src', './image/我的.svg')
        $('.my p').css('color', '#5D616A')
        $('.shopping img').attr('src', './image/购物车.svg')
        $('.shopping p').css('color', '#5D616A')
        $('.home img').attr('src', './image/首页.svg')
        $('.home p').css('color', '#5D616A')
        switch (newthis) {
            case 'home':
                $('.home img').attr('src', './image/首页-选中.svg')
                $('.home p').css('color', '#45B5ED')
                break;
            case 'shopping':
                $('.shopping img').attr('src', './image/购物车-选中.svg')
                $('.shopping p').css('color', '#45B5ED')
                break;
            case 'my':
                $('.my img').attr('src', './image/我的-选中.svg')
                $('.my p').css('color', '#45B5ED')
                break;
        }
    })
</script>
</html>